<template>
  <div class="app-container">
    <div class="app-container-cont index_dashboard" :style="{'--color':theme?'17,26,36':'255,255,255'}">
      <div class="flex-row" style="align-items:flex-start">
        <div>
          <el-carousel trigger="click" class="sm-carousel">
            <div class="left-top"></div>
            <div class="left-bottom"></div>
            <div class="right-top"></div>
            <div class="right-bottom"></div>
            <el-carousel-item>
              <div class="index-box">
                <div class="index-box-header flex-row">
                  <div class="title flex-box">酒店入住率</div>
                  <el-radio-group v-model="radio0" size="small" class="index-radio">
                    <el-radio-button label="日"></el-radio-button>
                    <el-radio-button label="月"></el-radio-button>
                    <el-radio-button label="年"></el-radio-button>
                  </el-radio-group>
                </div>
                <div class="box-body">
                  <div class="chart-wrapper">
                      <pie-chart2 :chart-data='piechartData' />
                  </div>
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="index-box">
                <div class="index-box-header">
                  <h2 class="title">房态统计</h2>
                </div>
                <div class="index-box-body">
                  <div class="total">总房间数<b class="num">123,456</b></div>
                    <div class="chart-wrapper">
                      <el-col :span='6' class="text-center progress-box">
                        <div class="progree-text"><div class="label">空房数</div><div class="num">123,456</div></div>
                        <el-progress type="circle" :percentage="75" :stroke-width="10" :show-text='false' :width='100'/>
                      </el-col>
                      <el-col :span='6'  class="text-center progress-box">
                        <div class="progree-text"><div class="label">入住房数</div><div class="num">123,456</div></div>
                        <el-progress type="circle" :percentage="25" :stroke-width="10" :show-text='false' :width='100' status="success"/>
                        </el-col>
                      <el-col :span='6'  class="text-center progress-box">
                        <div class="progree-text"><div class="label">脏房数</div><div class="num">123,456</div></div>
                        <el-progress type="circle" :percentage="50" :stroke-width="10" :show-text='false' :width='100' status="exception" />
                      </el-col>
                      <el-col :span='6'  class="text-center progress-box">
                        <div class="progree-text"><div class="label">故障房数</div><div class="num">123,456</div></div>
                        <el-progress type="circle" :percentage="50" :stroke-width="10" :show-text='false' :width='100' status="warning" />
                      </el-col>
                    </div>
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
                <div class="index-box">
                  <div class="index-box-header flex-row">
                    <div class="title flex-box">酒店收入分析</div>
                    <el-radio-group v-model="radio0" size="small" class="index-radio">
                      <el-radio-button label="日"></el-radio-button>
                      <el-radio-button label="月"></el-radio-button>
                      <el-radio-button label="年"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="index-box-body">
                    <div class="total">总收入<b>50,000.00 万</b></div>
                    <div class="chart-wrapper">
                      <line-chart :chart-data="rateDta" />
                    </div>
                  </div>
                </div>
              </el-carousel-item>
          </el-carousel>
          <el-carousel trigger="click" class="sm-carousel">
            <div class="left-top"></div>
            <div class="left-bottom"></div>
            <div class="right-top"></div>
            <div class="right-bottom"></div>
              <el-carousel-item>
                <div class="index-box">
                  <div class="index-box-header flex-row">
                    <div class="title flex-box">安防设备统计</div></div>
                  <div class="index-box-body">
                    <div class="total">安防设备总数<b>50</b></div>
                    <div class="chart-wrapper">
                        <bar-chart />
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="index-box">
                  <div class="index-box-header flex-row">
                    <div class="title flex-box">报警工单统计</div>
                    <el-radio-group v-model="radio0" size="small" class="index-radio">
                      <el-radio-button label="日"></el-radio-button>
                      <el-radio-button label="月"></el-radio-button>
                      <el-radio-button label="年"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="index-box-body">
                    <div class="total">运维工单总数<b>50</b></div>
                    <div class="chart-wrapper">
                      <line-chart :chart-data="alarmData" />
                    </div>
                  </div>
                </div>
              </el-carousel-item>
          </el-carousel>
        </div>
        <!-- left end -->
        <div class="flex-box">
            <div class="index-title">
              中核智能园区管理平台看板
            </div>
        </div>
        <!-- center end -->
        <div>
          <el-carousel trigger="click" class="sm-carousel">
            <div class="left-top"></div>
            <div class="left-bottom"></div>
            <div class="right-top"></div>
            <div class="right-bottom"></div>
            <el-carousel-item>
              <div class="index-box">
                <div class="index-box-header flex-row">
                  <div class="title flex-box">设备运行统计</div>
                  <el-radio-group v-model="radio0" size="small" class="index-radio">
                    <el-radio-button label="日"></el-radio-button>
                    <el-radio-button label="月"></el-radio-button>
                    <el-radio-button label="年"></el-radio-button>
                  </el-radio-group>
                </div>
                <div class="index-box-body">
                  <div class="total">安防设备总数<b>50</b></div>
                  <div class="chart-wrapper">
                      <bar-chart />
                  </div>
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="index-box">
                <div class="index-box-header flex-row">
                  <h2 class="title flex-box">能耗统计</h2>
                  <el-radio-group v-model="radio0" size="small" class="index-radio">
                    <el-radio-button label="日"></el-radio-button>
                    <el-radio-button label="月"></el-radio-button>
                    <el-radio-button label="年"></el-radio-button>
                  </el-radio-group>
                </div>
                <div class="index-box-body">
                  <div class="chart-wrapper">
                      <pie-chart2 :chart-data='energyData'/>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
          <el-carousel trigger="click" class="sm-carousel">
              <div class="left-top"></div>
              <div class="left-bottom"></div>
              <div class="right-top"></div>
              <div class="right-bottom"></div>
              <el-carousel-item>
                <div class="index-box">
                  <div class="index-box-header flex-row">
                    <div class="title flex-box">考勤统计</div>
                    <el-radio-group v-model="radio0" size="small" class="index-radio">
                      <el-radio-button label="日"></el-radio-button>
                      <el-radio-button label="月"></el-radio-button>
                      <el-radio-button label="年"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="index-box-body">
                    <div class="chart-wrapper">
                        <bar-chart />
                    </div>
                  </div>
                </div>
              </el-carousel-item>
          </el-carousel>
        </div>
        <!-- right end -->
      </div>
      <div class="clearfix">
        <el-carousel trigger="click" class="base-carousel">
            <div class="left-top"></div>
            <div class="left-bottom"></div>
            <div class="right-top"></div>
            <div class="right-bottom"></div>
          <el-carousel-item>
            <div class="index-box">
              <div class="index-box-header">
                <div class="title">人员出入统计</div>
              </div>
              <div class="index-box-body">
                <div class="chart-wrapper">
                  <line-chart :chart-data="lineChartData" />
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import PieChart from './components/PieChart';
import PieChart2 from './components/PieChart2';
import BarChart from './components/BarChart';
import LineChart from './components/LineChart';
const pieChartData ={
  frist:{
    name:'酒店入住率',
    total:459,
    title:['大床房','双人床'],
    list:[
      { value: 36, name: '大床房' },
      { value: 36, name: '双人床' },
    ]
  },
  seracd:{
    name:'能耗统计',
    total:300,
    title:['水','电','热'],
    list:[
      { value: 150, name: '水' },
      { value: 72, name: '电' },
      { value: 78, name: '热' }
    ]
  }
}
const lineChartData = {
  newVisitis: {
    xAxisData:['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'],
    list:[{
      name:'酒店部',
      data:[100, 120, 161, 134, 105, 160, 165,80, 60, 71, 120,51,87,61,121,91,105, 160, 165,80, 60, 71, 120,51]
      },{
      name:'安保部',
      data:[120, 82, 91, 154, 162, 140, 145,120, 156, 110,120, 82, 91, 154, 162, 140, 145,120, 156, 110, 82, 91, 154, 105]
      },{
      name:'工程部',
      data:[80, 60, 71, 120, 156, 110, 84,100, 120, 161, 134, 105, 160,120, 82, 91, 154, 162, 140, 145,120, 156, 110,156]
      }]
  },
  alarmData: {
    xAxisData:['火灾报警', '门禁报警', '视频监控', '手动报警'],
    list:[{
      name:'酒店部',
      data:[70, 80, 90, 51]
    },{
      name:'安保部',
      data:[60, 50, 80, 71]
    },{
      name:'工程部',
      data:[50, 40, 70, 80]
    },{
      name:'后勤部',
      data:[40, 54, 70, 30]
    }]
  },
  rateDta:{
    xAxisData:['房费', '餐费', '商品'],
    list:[{
      name:'酒店部',
      data:[30, 40, 95]
    }]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  name: 'Dashboard',
  components:{
    PieChart,
    PieChart2,
    BarChart,
    LineChart,
  },
  data() {
    return {
      radio0:'日',
      radio1:'本周',
      piechartData:pieChartData.frist,
      energyData:pieChartData.seracd,
      lineChartData: lineChartData.newVisitis,
      alarmData:lineChartData.alarmData,
      rateDta:lineChartData.rateDta

    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/theme.scss";
// $color:var(--color);
$color:#111a24;
$colorAux:#3cc2db;
.app-container{
  height: calc(100vh - 54px);
  background-image: url('./../../assets/images/index-bg@2x.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  >.flex-row{align-items:flex-start}
  .index-title{
    width: 650px;
    height: 70px;
    line-height: 70px;
    margin:0 auto;
    font-size: 32px;
    text-align: center;
    color: #44E4FF;
    background: linear-gradient(left, rgba(0,0,0,0) 0%,  rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%,  rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,  rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%,  rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,  rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%,  rgba(0,0,0,0) 100%);
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%,  rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%,  rgba(0,0,0,0) 100%);
    position: relative;
    &::before{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top:0;
      height: 2px;
      background: linear-gradient(left, rgba(#44E4FF,0) 0%,  rgba(#44E4FF,.5) 20%, rgba(#44E4FF,.9) 50%, rgba(#44E4FF,.5) 80%,  rgba(#44E4FF,0) 100%);
    }
    &::after{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom:0;
      height: 2px;
      background: linear-gradient(left, rgba(#44E4FF,0) 0%,  rgba(#44E4FF,.5) 20%, rgba(#44E4FF,.9) 50%, rgba(#44E4FF,.5) 80%,  rgba(#44E4FF,0) 100%);
    }
  }
  .sm-carousel,.base-carousel{
    overflow: hidden;
    background-color: rgba($color,.6);
    border: 1px solid #285B6E;
    position: relative;
    .left-top{
      position: absolute;
      top:0;
      left: 0;
      width: 16px;
      height: 16px;
      border-left: 2px solid $colorAux;
      border-top: 2px solid $colorAux;
    }
    .right-top{
      position: absolute;
      top:0;
      right: 0;
      width: 16px;
      height: 16px;
      border-right: 2px solid $colorAux;
      border-top: 2px solid $colorAux;
    }
    .left-bottom{
      position: absolute;
      bottom:2px;
      left: 0;
      width: 16px;
      height: 16px;
      border-left: 2px solid $colorAux;
      border-bottom: 2px solid $colorAux;
    }
    .right-bottom{
      position: absolute;
      bottom:2px;
      right: 0;
      width: 16px;
      height: 16px;
      border-right: 2px solid $colorAux;
      border-bottom: 2px solid $colorAux;
    }
  }
  .sm-carousel{
    width: 500px;
    height: 300px;
    margin-bottom: 20px;
  }
  .index-box{
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #fff;
    .index-box-header{
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      position: relative;
      &::after{
        position: absolute;
        content: '';
        bottom: 0;
        left: 20px;
        right: 20px;
        height: 1px;
        background-color:rgba(#9CC0ED, .1) ;
      }
      .title{font-size: 18px;}
    }
    .index-box-body{
      position: relative;
      .total{
        position: absolute;
        right: 20px;
        top:20px;
        color: rgba($color: (#fff), $alpha: .7);
        b{
          margin-left: 5px;
          color: rgba($color: (#fff), $alpha: 1);
          font-size: 18px;
        }
      }
      .progress-box{
        position: relative;
        margin-top: 60px;
        .progree-text{
          position: absolute;
          left: 20px;
          top:20px;
          right: 20px;
          text-align: center;
          padding: 10px 0;
          color: rgba(#fff,.6);
          .num{
            font-size: 16px;
            font-weight: 700;
            margin-top: 5px;
          color: rgba(#fff,1);
          }
        }
      }
    }
  }
  
}
@media screen and (max-width: 1200px){
  
}
  
</style>
